<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

            <el-col :span="6">
                <el-form-item label="模版申请编号:" prop="code">
                    <el-input v-model="queryParams.code" clearable placeholder="请输入单号"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="额度申请:" prop="applicationNo">
                    <el-input v-model="queryParams.applicationNo" clearable placeholder="请输入额度申请编号"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="客户名称:" prop="applicationCustomerName">
                    <el-input v-model="queryParams.applicationCustomerName" clearable placeholder="请输入客户名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="申请类型:" prop="applicationType">
                    <el-select v-model="queryParams.applicationType" clearable>
                        <el-option v-for="dict in dict.type.contract_template_edit_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="来源:" prop="source">
                    <el-select v-model="queryParams.source" clearable>
                        <el-option label="模版修改申请" :value="1"></el-option>
                        <el-option label="额度申请" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="审批状态:" prop="approvalStatus">
                    <el-select v-model="queryParams.approvalStatus" clearable>
                        <template v-for="dict in dict.type.approval_status">
                            <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>


            <el-col :span="6">
                <el-form-item label="创建时间:" prop="startTime">
                    <el-date-picker
                        v-model="timeRange"
                        type="daterange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="changeTime"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="创建人:" prop="createBy">
                    <el-input v-model="queryParams.createBy" clearable placeholder="请输入创建人"></el-input>
                </el-form-item>
            </el-col>


        </SearchContent>

        <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
            <div class="table-title-wrap justify-end">
                <el-button  v-hasPermi="['contractTemplate:apply:add']" type="primary" size="mini" @click="addContractTemplateApply">新增模版申请
                </el-button>
            </div>


            <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px" fixed="left">
                        <template v-slot="{row}">
                            <e-button v-hasPermi="['contractTemplate:apply:detail']" size="mini" type="text" @click="handleOperate(1, row)"
                            >查看
                            </e-button>
                            <e-button v-hasPermi="['contractTemplate:apply:managerCustomer']" v-if="row.approvalStatus==2&&(row.applicationType==3||row.applicationType==4)&&row.onlyThis==2"  size="mini" type="text" @click="handleOperate(2,row)"
                            >管理客户
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column label="审核状态" align="center" prop="approvalStatus" min-width="80px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.approval_status" :value="row.approvalStatus"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="模版申请单单号" align="center" prop="code" min-width="140px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <e-button class="enable-text-select"  size="mini" type="text" @click="handleOperate(1,row)"
                            >{{row.code}}
                            </e-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="关联额度申请" align="center" prop="applicationNo" min-width="140px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="额度申请客户" align="center" prop="applicationCustomerName" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="申请类型" align="center" prop="applicationType" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <dict-tag :options="dict.type.contract_template_edit_type" :value="row.applicationType"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="来源" align="center" prop="source" min-width="100px" show-overflow-tooltip>
                        <template v-slot="{row}">
                           <span v-if="row.source==1">模版修改申请</span>
                            <span v-else-if="row.source==2">额度申请</span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="模版名称" align="center" prop="newTemplateName" min-width="120px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="创建人" align="center" prop="createBy" min-width="100px" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center" prop="createTime" min-width="120px" show-overflow-tooltip/>
                </template>
            </table-page>
        </div>
        <manager-customer ref="managerCustomer" :view-type="2" @success="handleQuery"></manager-customer>
    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import ManagerCustomer from "@/views/contractTemplate/components/ManagerCustomer.vue";
import * as templateApplyApi from "@/api/contractTemplate/templateUpdate";
export default {
    name: "TemplateApplyList",
    components: {
        SearchContent,
        ManagerCustomer
    },
    dicts: ['contract_template_edit_type','approval_status'],
    data() {
        return {
            // 遮罩层
            loading: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                code:null,
                applicationNo:null,
                applicationCustomerName:null,
                applicationType:null,
                source:null,
                approvalStatus:null,
                createBy: null,
                startTime: null,
                endTime: null,
            },
            timeRange: [],
            total: 0,
            dataList: []

        };
    },
    mounted() {
        this.getList()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;
            templateApplyApi.templateApplyList(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })

        },
        // 创建时间发生改变
        changeTime(val) {
            this.queryParams.startTime = val[0]
            this.queryParams.endTime = val[1]
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.$refs?.queryForm?.resetFields();
            this.queryParams.startTime=null
            this.queryParams.endTime=null
            this.timeRange = []
            this.handleQuery();
        },

        /** 新增操作 */
        addContractTemplateApply() {
            this._toPage({
                name: 'TemplateApplyAdd',
            })
        },

        handleOperate(type, row) {
            switch (type) {
                case 1://查看
                    this._toPage({
                        name: 'TemplateApplyDetail',
                        query:{
                           id:row.id
                        }
                    })
                    break
                case 2://管理客户
                    const customerIds = row.customerIds?.split(',')
                    this.$refs.managerCustomer.show(row.id, row.newTemplateId, customerIds)
                    break
            }
        },

    }
};
</script>
